<template>
  <el-row class="login-container" justify="center" :align="'middle'">
    <el-card style="max-width: 480px">
      <template #header>
        <div class="card-header">
          <img :src="imgUrl" alt="" />
        </div>
      </template>
      <div class="jump-link">
        <el-link type="primary" @click="handleChange">{{
          formType ? "返回登录" : "注册账号"
        }}</el-link>
      </div>
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        style="max-width: 600px"
        class="demo-ruleForm"
        :rules="rules"
      >
        <el-form-item prop="userName">
          <el-input
            v-model="loginForm.userName"
            placeholder="手机号"
            :prefix-icon="UserFilled"
          ></el-input>
        </el-form-item>
        <el-form-item prop="passWord">
          <el-input
            v-model="loginForm.passWord"
            type="password"
            placeholder="密码"
            :prefix-icon="Lock"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="formType" prop="validCode">
          <el-input
            v-model="loginForm.validCode"
            placeholder="验证码"
            :prefix-icon="Lock"
          >
            <template #append>
              <span @click="countdownChange">{{ countdown.validText }}</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :style="{ width: '100%' }"
            @click="submitForm(loginFormRef)"
          >
            {{ formType ? "注册账号" : "登录" }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-row>
</template>

<script setup>
import { ref, reactive, computed, toRaw } from "vue";
import { UserFilled, Lock } from "@element-plus/icons-vue";
import {
  getCode,
  userAuthentication,
  login,
  menuPermissions,
} from "../../api/index";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const imgUrl = new URL("../../../public/login-head.png", import.meta.url).href;

//表单初始数据
const loginForm = reactive({
  userName: "",
  passWord: "",
  validCode: "",
});

//切换表单（0登录 1 注册）
const formType = ref(0);
//点击却换注册
const handleChange = () => {
  formType.value = formType.value ? 0 : 1;
};

//账号校验规则
const validateUser = (rule, value, callback) => {
  //账号不能为空
  if (value === "") {
    callback(new Error("请输入账号"));
  } else {
    const phoneReg =
      /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
    phoneReg.test(value) ? callback() : callback(new Error("请输入正确手机号"));
  }
};

//密码校验规则
const validatePass = (rule, value, callback) => {
  //密码不能为空
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    const reg = /^[a-zA-Z0-9_-]{4,16}$/;
    reg.test(value)
      ? callback()
      : callback(
          new Error("密码格式不正确,需要4-16位字母、数字、下划线、减号")
        );
  }
};

// 表单校验
const rules = reactive({
  userName: [
    {
      validator: validateUser,
      trigger: "blur",
    },
  ],
  passWord: [
    {
      validator: validatePass,
      trigger: "blur",
    },
  ],
});

//发送短信
const countdown = reactive({
  validText: "获取验证码",
  time: 60,
});

let flag = false;
let timerId = null; // 存储定时器 ID

const countdownChange = () => {
  // 如果已经发送就不处理
  if (flag) return;

  // 判断手机号是否正确
  const phoneReg =
    /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
  if (!loginForm.userName || !phoneReg.test(loginForm.userName)) {
    return ElMessage({
      message: "请检查手机号是否正确",
      type: "warning",
    });
  }

  // 清除之前的定时器
  if (timerId) {
    clearInterval(timerId);
  }

  // 定时器（倒计时）
  timerId = setInterval(() => {
    if (countdown.time <= 0) {
      countdown.time = 60;
      countdown.validText = "获取验证码";
      flag = false;
      clearInterval(timerId); // 清除当前定时器
    } else {
      countdown.time -= 1;
      countdown.validText = `剩余 ${countdown.time}s`;
    }
  }, 1000);

  flag = true;

  getCode({ tel: loginForm.userName }).then(({ data }) => {
    if (data.code === 10000) {
      ElMessage.success("发送成功");
    } else {
      ElMessage.error("发送失败");
    }
  });
};

const router = useRouter();
const loginFormRef = ref();
const store = useStore();

const routerList = computed(() => store.state.menu.routerList);
// 表单提交
const submitForm = async (formEl) => {
  //没有经过登录校验直接点击跳转（后期接口找到后要把这句话删除就可以了）
  // router.push("/");
  //就是上面这句话

  if (!formEl) return;

  try {
    // 手动触发校验
    await formEl.validate((valid, fields) => {
      if (valid) {
        //注册页面
        if (formType.value) {
          console.log(loginForm, "submit!");
          userAuthentication(loginForm).then(({ data }) => {
            if (data.code === 10000) {
              ElMessage.success("注册成功");
              formType.value = 0;
            } else {
              ElMessage.error("注册失败");
            }
          });
        } else {
          //登录页面
          login(loginForm).then(({ data }) => {
            if (data.code === 10000) {
              ElMessage.success("登录成功");
              console.log(data);
              //将token和用户信息缓存到浏览器中去
              localStorage.setItem("pz_token", data.data.token);
              localStorage.setItem(
                "pz_userInfor",
                JSON.stringify(data.data.userInfo)
              );
              menuPermissions().then(({ data }) => {
                store.commit("dynamicMenu", data.data);
                console.log(routerList, "routerList");
                toRaw(routerList.value).forEach((item) => {
                  router.addRoute("main", item);
                });
                router.push("/");
              });
            }
          });
        }
      } else {
        console.log("error submit!", fields);
      }
    });
  } catch (error) {
    console.error("表单提交时发生错误:", error);
  }
};
</script>

<style lang="less" scoped>
:deep(.el-card__header) {
  padding: 0;
}
.login-container {
  height: 100%;
  .card-header {
    background-color: #899fe1;
    img {
      width: 430px;
    }
  }
  .jump-link {
    text-align: right;
    margin-bottom: 10px;
  }
}
</style>
